<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <link rel="stylesheet" th:href="@{/pear/component/pear/css/pear.css}"/>
    <style>
        .password-change-box {
            width: 600px; /* 设置框的宽度 */
            height: 250px;
            margin: 50px auto; /* 居中显示 */
            padding: 20px; /* 内边距 */
            border: 1px solid #e6e6e6; /* 边框 */
            border-radius: 5px; /* 圆角边框 */
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            background-color: #fff; /* 背景色 */
        }
    </style>
</head>
<body>
<div class="password-change-box">
    <form class="layui-form" method="POST" action="" lay-filter="layui-edit-form" autocomplete="off">
        <div class="main-container">
            <div class="layui-form-item">
                <label class="layui-form-label">原密码</label>
                <div class="layui-input-block">
                    <input type="password" name="oldPwd" autocomplete="off" value=""
                           lay-verify="required|oldPwd"
                           placeholder="原密码"
                           class="layui-input" id="init-password" lay-affix="eye">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-block">
                    <input type="password" name="newPwd" autocomplete="off" value=""
                           lay-verify="required|newPwd"
                           placeholder="密码"
                           class="layui-input" id="new-password" lay-affix="eye">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input type="password" autocomplete="off" name="confirmPwd" value=""
                           lay-verify="required|confirmPwd"
                           placeholder="确认密码" class="layui-input" lay-affix="eye">
                </div>
            </div>
            <div class="bottom" style="position: relative;background-color: white;border-top: none">
                <div class="button-container">
                    <button type="submit" class="layui-btn  layui-btn-sm" lay-submit=""
                            lay-filter="password-edit">
                        <i class="layui-icon layui-icon-ok"></i>
                        提交
                    </button>
                    <button type="reset" class="layui-btn layui-btn-sm">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
<script th:src="@{/pear/component/layui/layui.js}"></script>
<script th:src="@{/pear/js/crypto-js.min.js}"></script>
<script th:src="@{/pear/component/pear/pear.js}"></script>
<script th:inline="javascript">
    layui.use(['form'], function () {
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.$;
        let baseURL = /*[[@{/}]]*/ '';
        // 自定义验证规则
        form.verify({
            oldPwd: function (value) {
                if (value === '') {
                    return '请输入原密码';
                }
            },
            newPwd: function (value) {
                if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[~!@&%#_])[a-zA-Z0-9~!@&%#_]{8,20}$/.test(value)) {
                    return '密码必须包含数字、大小写字母和特殊字符，长度8到20位';
                }
            },
            confirmPwd: function (value) {
                let passwordValue = $('#new-password').val();
                if (value !== passwordValue) {
                    return '两次密码输入不一致';
                }
            }
        });
        form.on("submit(password-edit)", function (data) {
            // 使用AES加密密码
            var key = CryptoJS.enc.Utf8.parse('3f5279c6d4a12f58'); // 密钥应该是一个保密的字符串
            var iv = CryptoJS.enc.Utf8.parse('d4e2f6a0b8c0d2e8'); // 初始化向量，可以是任意值，但解密时需要相同
            var encryptedPwd = CryptoJS.AES.encrypt(data.field.oldPwd, key, {
                iv: iv,
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7
            });
            data.field.oldPwd = encryptedPwd.toString();
            var encryptedPwd1 = CryptoJS.AES.encrypt(data.field.newPwd, key, {
                iv: iv,
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7
            });
            data.field.newPwd = encryptedPwd1.toString();
            console.log(data.field.oldPwd)
            $.ajax({
                url: baseURL + "user/update_password",
                type: 'post',
                data: {
                    oldPwd: data.field.oldPwd,
                    newPwd: data.field.newPwd
                },
                dataType: 'json',
                success: function (res) {
                    console.log(res)
                    if (res.code === 1000) {
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 2000
                        }, function () {
                            window.close()
                            window.open(baseURL + "page/login", '_parent')
                        });
                    } else {
                        layer.msg(res.msg, {
                            icon: 2,
                            time: 2000
                        });
                    }
                }
            })
            return false; // 阻止表单默认提交
        })
    })
</script>
</body>
</html>